<template>
    <div v-html="prettyHtml"></div>
</template>

<script>
var Diff2Html= require('./d2h/diff2html.js').Diff2Html;
// console.log("diff2html",Diff2Html);
import './d2h/ui/css/diff2html.css'
export default {
  name: 'diffcommentsview',
  props: ['data','comments'],
  data(){
    return{
      changes: this.data,
      diffs: this.data,
      diffComments: this.comments,
      diffJson: {},
      diffFiles: [],
      config:{
        outputFormat: 'side-by-side',
      }
    }
  },
  computed: {
    
  },
  methods: {
    getJsonFromDiff(){
      //this.diffJson=Diff2Html.getJsonFromDiff()
    },
    loadData(){
      console.log("this.data",this.data);
      //var diff2html=new Diff2Html();
      this.diffJson=Diff2Html.getJsonFromDiff(this.data,this.config);
      let tmpPretty=Diff2Html.getPrettyHtmlFromJson(this.diffJson);
      console.log(this.diffJson);
    },
    checkJquery(){
      var dom=$("table").on('click','.d2h-code-side-linenumber',function(){
        console.log(this);
        alert('ok');
      });
      console.log("dom",dom);
    }

  },
  computed: {
    prettyHtml: function(){
      return Diff2Html.getPrettyHtml(this.diffs, {
          inputFormat: 'diff',
          showFiles: true,
          matching: 'lines',
          outputFormat: 'side-by-side'
      })
    }
  },
  mounted(){
    this.loadData();
    this.checkJquery();
  }
}
</script>
<style lang="scss" scoped>

</style>

